<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<!-- Head -->
<head>
    <title>主页</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        /* 超小屏幕（手机，小于 768px） */
        /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

        /* 小屏幕（平板，大于等于 768px） */
        @media (min-width: 768px) {
            #slider-sub{
                width: 250px;
                margin-top: 51px;
                position: absolute;
                z-index: 1;
                background: #052b64;
                height: 900px;
            }
            .mysearch{
                margin: 10px 0;
            }
            /*右边核心区域的设置*/
            .page_main{
                margin-left: 255px;
            }
        }
        .update{
            background: #ffffff;
            border: 1px solid #dddddd;
            border-radius: 10px;
            margin: 10px;
             right: 45%;
             top: 50%;
        }
        body{
            background: rgba(38, 50, 56,06);
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //页面加载，绑定单击事件
        $(function () {
            $("#myModal").click(function(){
                console.log("执行了")
                $('#identifier').modal()
            });
        });
      function updates(user) {
        console.log('执行数据了');
        $("#id").hide().val(user.id);
        console.log(user)
          $("#username").val(user.username);
          $("#name").val(user.name);
          $("#email").val(user.email);
      }
    </script>
</head>
<body>
<!--导航条-->
<nav>
<div class="navbar navbar-default navbar-static-top" style="background: DarkCyan">
    <div class="navbar-header">
<!--        data-target="#bs-example-navbar-collapse-1"-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  aria-expanded="false" data-target="#slider-sub">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand" style="font-weight: bold;font-size: 20px;color: white" >南风后台管理</a>
    </div>
    <ul class="nav navbar-nav navbar-right" style="margin-right: 25px"><!--右对齐--->
        <li><a href="#"><span class="badge" style="background: plum">23</span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;注销</a></li>
    </ul>
<!--    侧边栏-->
    <div class="navbar-default navbar-collapse"  id="slider-sub">
        <ul class="nav" >
            <li>

<!--                搜索-->
                <div class="input-group mysearch">
                    <input type="text" class="form-control"/>
                    <span class="input-group-btn">
                           <button type="button" class="btn btn-default">
                               <span class="glyphicon glyphicon-search"></span>
                           </button>
                       </span>
                </div>
            </li>
            <li>

<!--                折叠展开-->
                <a href="#sub1"  data-toggle="collapse">财务管理
                    <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
<!--                子菜单-->
                <ul id="sub1" class="nav collapse">
                    <li><a href="findAll"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;信用卡管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;网贷管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;其他</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub2" data-toggle="collapse">学习规划
<!--                    折叠展开-->
                    <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
<!--                子菜单-->
                <ul id="sub2" class="nav collapse">
                    <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;阅读目标</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;锻炼技能</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;其他</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub3"  data-toggle="collapse">图形界面
                    <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                <ul id="sub3" class="nav collapse">
                    <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;负债图表</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;理财收益</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;收支</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                </ul>
            </li>
            <li>
                <a href="#sub4"  data-toggle="collapse">工作功能
                    <span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
                <ul id="sub4" class="nav collapse">
                    <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;项目管理</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;人脉圈</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;待处理事项</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-remove-circle"></span>&nbsp;退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
  </div>
</nav>

<!--右边核心区域-->
<div class="page_main" >
    <ol class="breadcrumb">
        <li><a href="#">管理首页</a></li>
        <li><a href="#">栏目管理</a></li>
        <li class="active">增加栏目</li>
    </ol>
   <div class="row">
    <div class="col-md-6 ">
        <div class="panel panel-default">
            <div class="panel-heading">最新订单</div>
            <div style="margin: 10px">
                <button type="button" class="btn btn-primary">新增账户</button>
                <button type="button" class="btn btn-primary" id="sel">查询用户</button>
            </div>
            <div class="panel-body " >
                <table class="table table-striped table-hover table-bordered ">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>账户</th>
                        <th>注册时间</th>
                        <th>名字</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>操作</th>
                        <th>操作</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr th:each="user:${users}">
                        <td th:text="${user.id}"></td>
                        <td th:text="${user.username}"></td>
                        <!--日期格式化-->
                        <td th:text="${#dates.format(user.createBy,'yyyy-MM-dd HH:mm')}"></td>
                        <td th:text="${user.name}"></td>
                        <td th:text="${user.email}"></td>
                        <td th:text="${user.cancel}==0?'未注销':'已注销'"></td>
                        <td> <button type="button" th:onclick="updates([[${user}]])" class=" btn btn-info" data-toggle="modal" data-target="#myModal" >修改账户</button> </td>
                        <td><button type="button" class="btn btn-danger">删除账户</button></td>
                        <td><button type="button" class="btn btn-danger">注销账户</button></td>
                    </tr>
                    <!--<tr><td>1</td><td>0123456</td><td>2020-03-05</td><td>1000</td><td>163@com</td><td>未注销</td> <td> <button type="button" class="btn btn-info">修改账户</button> </td> <td><button type="button" class="btn btn-danger">删除账户</button></td>
                        <td><button type="button" class="btn btn-danger">注销账户</button></td></tr>
                    <tr><td>2</td><td>0123456</td><td>2020-03-05</td><td>1000</td><td>163@com</td><td>未注销</td><td><button type="button" class="btn btn-info">修改账户</button></td>
                        <td><button type="button" class="btn btn-danger">删除账户</button></td><td><button type="button" class="btn btn-danger">注销账户</button></td></tr>
                    -->
                    </tbody>
                </table>
                <nav aria-label="Page navigation"  >
                    <ul class="pagination" style="margin-top: 10px">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="row " style="margin-bottom: 10px">
        <div class="col-md-5 update modal-dialog modal fade"   id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
            <form th:action="@{/update2}" method="post">
                <input type="text" class="form-control" name="id" id="id">
                <div class="form-group" style="margin-top: 10px">
                    <label for="username">账户</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="账户名称">
                </div>
                <div class="form-group">
                    <label for="name">名字</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="名字">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="邮箱名称">
                </div>
                <button type="submit" class="btn btn-warning" style="width: 80%;margin-bottom: 20px">立即提交</button>
            </form>
        </div>

    </div>
</div>
                        <!-- <tbody>
                         <c:forEach items="${list}" var="jcb">
                             <%&#45;&#45;一行&#45;&#45;%>
                             <tr><td>${jcb.id}</td><td><fmt:formatDate value="${ jcb.schedule }"
                                                                       pattern="yyyy-MM-dd "/></td><td>${jcb.month}</td><td>${jcb.jcbName}</td><td>${jcb.bank}</td><td>${jcb.quota}</td>
                                 <td>${jcb.bmikece}</td><td>${jcb.billingDate}</td><td>${jcb.dueDate}</td><td>${jcb.isAlso}</td><td>${jcb.caffe}</td><td>${jcb.genre}</td>
                                 <td>${jcb.interest}</td><td>${jcb.account}</td><td>${jcb.remark}</td>
                                 <td><a href="jcb">新增</a></td><td><a href="delete?id=${jcb.id}">删除</a></td><td><a href="update?id=${jcb.id}">修改</a></td></tr>
                         </c:forEach>
                         <%&#45;&#45;      &lt;%&ndash;第二行&ndash;%&gt;
                         <tr><td>1</td><td>2020-03-06</td><td>3月</td><td>建设银行信用卡</td><td>建设银行</td><td>5000元</td>
                             <td>0元</td><td>每月15号</td><td>每月4号</td><td>已还</td><td>102元</td><td>可循环</td>
                             <td>1.41元</td><td>62170038521436521</td><td>无</td>
                             <td><a href="jcb">新增</a></td><td><a href="delete">删除</a></td><td><a href="update">修改</a></td></tr>&#45;&#45;%>
                         </tbody>
                     </table>-->
<!--                       pull-right:移到右边 -->



</div>
<!--<script  src="/js/jquery-2.1.1.js" type="text/javascript"></script>-->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</body>
</html>